<template>
	<div class="S_Performance">
		<div class="one_part">
			<!-- <nav-li></nav-li> -->
			<nav>
				<div class="nav select_nav">
					<select v-model="picked" @change="getselectData()">
						<option v-for="li of navData" :value="li.key">{{li.value}}</option>
					</select>
				</div>
			</nav>
			<ul class="ranking">
				<!-- <router-link tag="li" :to="{path:'/getPayDetail',query:{empNo:personalId}}"><i class="ion" :class="statusClass"></i><p>{{yearData.status || '良好'}}</p></router-link> -->
				<li @click="statusTip">
					<i class="ion" :class="statusClass"></i>
					<p>{{yearData.status || '良好'}}</p>
					<span class="status_tip" v-if="isShowStatusTip">
						<b>严重违规：</b>有“严重违规项”<br>
						<b>其他违规：</b>有“较严重违规项”&amp;“一般违规项”等其它违规<br>
						<b>经营良好：</b>没有违规项
					</span>
				</li>
				<li><big>{{yearData.rank || 0}}</big><p>驾驶安全财富榜排名</p></li>
				<router-link tag="li" to="/getLevelExplain"><i class="icon_jewel"></i><p>{{yearData.level ||'未知'}}</p></router-link>
			</ul>
		</div>
		<div class="ranking_info">
			<ul>
				<li><span class="fc_green">{{yearData.safeKMMon || 0}}<i class="ft12">/KM</i></span><p>当月安全里程</p></li>
				<li><span class="fc_orange">{{yearData.safeKMYear || 0}}<i class="ft12">/KM</i></span><p>累计安全里程</p></li>
				<li>
					<span @click="starTip">
					    <i class="ion ion-android-star icon_star_highlight"></i><ins v-cloak>x{{starNum || 0}}</ins>
						<i class="ion ion-android-star ion-ios-rose"></i><ins v-cloak>x{{flowerNum || 0}}</ins>
					</span>
					<span class="star_tip" v-if="isShowStarTip">周零违规=1花<br/>12花=1星</span>
					<p>累计安全星</p>
				</li>
			</ul>
		</div>
		<ul class="two year_two">
			<li @click="getAccidentByYear">
				<i class="icon_castrol circle car"></i>
				<p>事故{{yearData.accidentTime || 0}}起</p>
			</li>
			<li @click="getIllegalByYear">
				<i class="icon_castrol circle eye"></i>
				<p>违章{{yearData.illTime || 0}}次</p>
			</li>
			<li @click="getDudectPointByYear">
				<i class="icon_castrol circle per_info"></i>
				<p>被扣{{yearData.dedTotal || 0}}分</p>
			</li>
		</ul>
		<div class="pay_detail">
			<div class="part">
				<div ref="earnEchart" style="width:100%;height:28.2rem"></div>
			</div>
			<div v-if = "earnList.length>0" class="mb10 mt-10">
				<h3 class="plrEmpty ft15 line_height200">{{earnType}}</h3>
				<ul class="items">
					<li class="has_right_attach" v-for="list of earnList"><span>{{list.content}}</span><span class="attach">{{list.happenDate}}</span></li>
				</ul>
			</div>
			<div class="part">
				<h2>本年您累计支出(分)</h2>
				<div ref="payChart" style="width:100%;height:30rem"></div>
			</div>
			<div v-if="payList.length>0">
				<h3 class="plrEmpty ft15 line_height200">{{payType}}</h3>
				<ul class="items">
					<li class="has_right_attach" v-for="list of payList" @click="getDetailShow(list)">
						<span class="content">{{list.content}}</span>
						<span class="attach">{{list.happenDate}}</span>
						<!-- <detail-show v-if="list.show" :showInfo="list.content" @close-show="hideShow(list)"></detail-show> -->
					</li>
				</ul>
		    </div>
		    <detail-show v-if="isShowPop" :showInfo="showInfoCon" @close-show="hideShow"></detail-show>

			<nav class="tab_nav">
				<ul>
					<li @click="tabSwitch(menu,index)" v-for="(menu,index) of menuList" :class="{cur:menu.isCur}">{{menu.name}}</li>
				</ul>
			</nav>
			
			<div class="part" v-show="isShowOverTime">
			    <span>数据来源于vdr</span>
				<h2>YTD超时</h2>
				<div ref="overTimeCountryChart" style="width:100%;height:20rem"></div>
				<div class="mt30" ref="overTimePersonalChart" style="width:100%;height:20rem"></div>
			</div>
			<div class="part" v-show="isShowOverSpeed">
			    <span>数据来源于vdr</span>
				<h2>YTD超速</h2>
				<div ref="speedingCountryChart" style="width:100%;height:20rem"></div>
				<div class="mt30" ref="speedingPersonalChart" style="width:100%;height:20rem"></div>
			</div>
			<div class="part" v-show="isShowNightDriving">
			    <span>数据来源于vdr</span>
				<h2>YTD夜驾</h2>
				<div ref="nightCountryChart" style="width:100%;height:20rem"></div>
				<div class="mt30" ref="nightPersonalChart" style="width:100%;height:20rem"></div>
			</div>
			<div class="part" v-show="isShowRapid">
			    <span>数据来源于vdr</span>
				<h2>YTD急加减速</h2>
				<div ref="rapidCountryChart" style="width:100%;height:20rem"></div>
				<div class="mt30" ref="rapidPersonalChart" style="width:100%;height:20rem"></div>
			</div>
		</div>

	</div>
</template>
<script type="text/javascript">
	import getInterface from '../../assets/js/insterface'
	import InterfaceUrl from '../../assets/js/performace/url'
	import echarts from 'echarts'
	import echartsOptions from '../../assets/js/performace/echartOption'
	import PayInterfaceUrl from '../../assets/js/performace/url'
	
	import DetailShow from './toastShow'

	export default{
		mixins:[InterfaceUrl,echartsOptions,PayInterfaceUrl],
		components:{
			DetailShow
		},
		data(){
			return{
				'earnList':[],
				'earnType':'',
				'payList':[],
				'payType':'',
				'personalId':'',
				'picked':'',
				'navData':[],
				'flowerNum':'',
				'starNum':'',
				'yearData':'',
				'statusClass':'ion-android-happy',
				'isShowStarTip':false,
				'isShowStatusTip':false,
				// 'count':0,
				// 'chartCount':8,
				// 'busy':false,
				'menuList':[
					{'name':"超时",'isCur':true},
					{'name':"超速",'isCur':false},
					{'name':"夜驾",'isCur':false},
					{'name':"急加减速",'isCur':false},
				],
				'isShowOverTime':true,
				'isShowOverSpeed':false,
				'isShowNightDriving':false,
				'isShowRapid':false,
				'isShowPop':false,
				'showInfoCon':''
			}
		},
		mounted(){
			document.title="安全绩效";
			this.$el.parentElement.parentNode.style.background = '#fafafa';
      		//this.personalId = this.$route.query.empNo;
      		this.getNavListData();
		},
		methods:{
			//navList
			getNavListData(){
				const statusUrl = getInterface.getStatusUrl + this.$route.query.empNo +'/' + this.$route.query.status;
				this.$http.get(statusUrl,{emulateJSON:true})
				.then((response) => {
					console.log(response);
					if(response.data.length>0){
						this.navData = response.data;
						this.picked = response.data[0].key;
						console.log(this.picked);

						this.getYearData();
						this.getEarnsData();
						this.getDeductChartByPersonalData();
						this.getOverTimeCountryData();
						this.getOverTimePersonalData();
					}else{
						alert("暂无数据");

					}
				})
			},
			getYearData(){
				let yearUrl = getInterface.getYearUrl + '/'+ this.picked;
				// console.log("picked------------" + this.picked);
				this.$http.get(yearUrl,{emulateJSON: true})
				.then((response) => {
					console.log(response);
					console.log(response.data);

					if(response.data){
						this.yearData = response.data;
						let star = response.data.safeStar.split('.');
						this.flowerNum = star[1];
						this.starNum = star[0];

						switch(response.data.status){
							case 1:
								this.yearData.status = "经营良好";
								this.statusClass = 'ion-android-happy';
								break;
							case 2:
								this.yearData.status = "其他违规";
								this.statusClass = 'ion-android-sad fc_orange';
								break;
							case 3:
								this.yearData.status = "严重违规"
								this.statusClass = 'ion-android-sad fc_red';
								break;
						}
					}else{
                        this.yearData = {};
                        this.starNum = 0;
                        this.flowerNum = 0;
					}
				})
			},
			//事故
			getAccidentByYear(){
				if(this.yearData.accidentTime>0){
					this.$router.push({path:'/getAccidentByYear',query:{empNo:this.picked}});
				}
			},
			//违章
			getIllegalByYear(){
				if(this.yearData.illTime>0){
					this.$router.push({path:'/getIllegalByYear',query:{empNo:this.picked}});
				}
			},
			//扣分
			getDudectPointByYear(){
				if(this.yearData.dedTotal>0){
					this.$router.push({path:'/getDudectPointByYear',query:{empNo:this.picked}});
				}
			},
			tabSwitch(menu,index){
				for(let menuLi of this.menuList){
					menuLi.isCur = false;
				}
				menu.isCur = true;

				let vue = this;
				switch(index){
					case 0:
						this.isShowOverTime = true;
						this.isShowOverSpeed = false;
						this.isShowNightDriving = false;
						this.isShowRapid = false;
						setTimeout(()=>{
							vue.getOverTimeCountryData();
							vue.getOverTimePersonalData();
						},10)
						break;
					case 1:
						this.isShowOverTime = false;
						this.isShowOverSpeed = true;
						this.isShowNightDriving = false;
						this.isShowRapid = false;
						setTimeout(()=>{
							vue.getSpeedingCountryData();
							vue.getSpeedingPersonalData();
						},10)
						break;
					case 2:
						this.isShowOverTime = false;
						this.isShowOverSpeed = false;
						this.isShowNightDriving = true;
						this.isShowRapid = false;
						setTimeout(()=>{
							vue.getNightCountryData();
			        		vue.getNightPersonalData();
						},10)
						break;
					case 3:
						this.isShowOverTime = false;
						this.isShowOverSpeed = false;
						this.isShowNightDriving = false;
						this.isShowRapid = true;
						setTimeout(()=>{
							vue.getRapidCountryData();
							vue.getRapidPersonalData();
						},10)
						break;
				}
			},
			//赚取chart
			getEarnsData(){
				let bonusChartByPersonalUrl = getInterface.getBonusChartByPersonalUrl + '/' + this.picked;
				let myChart = echarts.init(this.$refs.earnEchart);
				this.$http.get(bonusChartByPersonalUrl,{emulateJSON:true})
				.then((response) =>{
					console.log(response);
					let vue = this;
					// debugger;
					if(response){
						this.earnsOption.legend.data = response.data[0].name;
						this.earnsOption.yAxis[0].data = response.data[0].type;
						let datas = response.data[0].data;
						let dataLen = datas.length;
						for(let i=0;i<dataLen;i++){
							this.earnsOption.series[i].name = response.data[0].name[i];
							this.earnsOption.series[i].data = datas[i];
						}
						myChart.setOption(this.earnsOption);

						myChart.on('click',function(params){
							// console.log(params.name);
							vue.getEarnListData(params.dataIndex+1,params.name);

							// switch(params.name){
							// 	case '良好表现':
							// 		// console.log("1-------"+params.name);
							// 		vue.getEarnListData(1,params.name);
							// 		break;
							// 	case '优异表现':
							// 		// console.log("2-------"+params.name);
							// 		vue.getEarnListData(2,params.name);
							// 		break;
							// 	case '卓越表现':
							// 		// console.log("3-------"+params.name);
							// 		vue.getEarnListData(3,params.name);
							// 		break;
							// 	default:
							// 		console.log("0000-------"+params.name);
							// 		vue.earnList = [];
							// }
						})
					}
					// myChart.setOption(this.earnsOption);
				})
			},
			// 支出
			getDeductChartByPersonalData(){
				let deductChartByPersonalUrl = getInterface.getDeductChartByPersonalUrl + '/'+ this.picked;
				let payChart = echarts.init(this.$refs.payChart);
				let vue = this;

				this.$http.get(deductChartByPersonalUrl,{emulateJSON:true})
				.then((response) => {
					// console.log(response);
					if(response){
						this.payOption.yAxis.data = response.data[0].type;
						this.payOption.series[0].data = response.data[0].data[0];
						payChart.setOption(this.payOption);

						payChart.on("click",function(params){
							// console.log(params.name);
							switch(params.name){
								case "严重违规":
									vue.getpayListData(20,params.name);
									break;
								case "较严重违规":
									vue.getpayListData(10,params.name);
									break;
								case "一般违规":
									vue.getpayListData(5,params.name);
									break;
								case "轻微违规":
									vue.getpayListData(3,params.name);
									break;
								case "违停/任务未完成":
									vue.getpayListData(1,params.name);
									break;
								default:
									vue.payList = [];
							}
						})
					}

				})
			},
			//超时
			getOverTimeCountryData(){
				let overTimeCountryUrl = getInterface.getOverTimeCountryUrl + '/' + this.picked;
				let overTimeCountryChart = echarts.init(this.$refs.overTimeCountryChart);
				// overTimeCountryChart
				this.$http.get(overTimeCountryUrl,{emulateJSON:true})
				.then((response) => {
					// console.log(response);
					if(response){
						this.overTimeCountryOption.yAxis.data = response.data[0].type;
						this.overTimeCountryOption.series[0].data = response.data[0].data[0];
						overTimeCountryChart.setOption(this.overTimeCountryOption);
					}
				})
			},
			getOverTimePersonalData(){
				let overTimePersonalUrl = getInterface.getOverTimePersonalUrl + '/' + this.picked;
				let overTimePersonalChart = echarts.init(this.$refs.overTimePersonalChart)
				this.$http.get(overTimePersonalUrl,{emulateJSON:true})
				.then((response) => {
					// console.log(response);
					if(response){
						let dataLen = response.data[0].data[0].length;
						this.overTimePersonalOption.xAxis.data[dataLen-1] = response.data[0].type[0];
						this.overTimePersonalOption.series.data = response.data[0].data[0];

						overTimePersonalChart.setOption(this.overTimePersonalOption);
					}
				})
			},
			//超速
			getSpeedingCountryData(){
				let speedingCountryUrl = getInterface.getSpeedingCountryUrl + '/' + this.picked;
				let speedingCountryChart = echarts.init(this.$refs.speedingCountryChart);
				this.$http.get(speedingCountryUrl,{emulateJSON:true})
				.then((response) => {
					// console.log(response);
					if(response){
						this.speedingCountryOption.yAxis.data = response.data[0].type;
						this.speedingCountryOption.series[0].data = response.data[0].data[0];
						speedingCountryChart.setOption(this.speedingCountryOption);
					}
				})
			},
			getSpeedingPersonalData(){
				let speedingPersonalUrl = getInterface.getSpeedingPersonalUrl + '/' + this.picked;
				let speedingPersonalChart = echarts.init(this.$refs.speedingPersonalChart);
				this.$http.get(speedingPersonalUrl,{emulateJSON:true})
				.then((response) => {
					// console.log(response);
					if(response){
						let dataLen = response.data[0].data[0].length;
						this.speedingPersonalOption.xAxis.data[dataLen-1] = response.data[0].type[0];
						this.speedingPersonalOption.series.data = response.data[0].data[0];

						speedingPersonalChart.setOption(this.speedingPersonalOption);
					}
				})
			},
			//夜驾
			getNightCountryData(){
				let nightCountryUrl = getInterface.getNightCountryUrl + this.picked;
				let nightCountryChart = echarts.init(this.$refs.nightCountryChart)
				this.$http.get(nightCountryUrl,{emulateJSON:true})
				.then((response) => {
					// console.log(response);
					if(response){
						this.nightCountryOption.yAxis.data = response.data[0].type;
						this.nightCountryOption.series[0].data = response.data[0].data[0];
						nightCountryChart.setOption(this.nightCountryOption);
					}
				})
			},
			getNightPersonalData(){
				let nightPersonalUrl = getInterface.getNightPersonalUrl + this.picked;
				let nightPersonalChart = echarts.init(this.$refs.nightPersonalChart);
				this.$http.get(nightPersonalUrl,{emulateJSON:true})
				.then((response) => {
					// console.log(response);
					if(response){
						// this.$parent.nightPersonalOption.xAxis.data = response.data[0].type;
						let dataLen = response.data[0].data[0].length;
						this.nightPersonalOption.xAxis.data[dataLen-1] = response.data[0].type[0];
						this.nightPersonalOption.series.data = response.data[0].data[0];
						nightPersonalChart.setOption(this.nightPersonalOption);
					}
				})
			},
			//急加减速
			getRapidCountryData(){
				let rapidCountryUrl = getInterface.getRapidCountryUrl + '/' + this.picked;
				let rapidCountryChart = echarts.init(this.$refs.rapidCountryChart)
				this.$http.get(rapidCountryUrl,{emulateJSON:true})
				.then((response) => {
					// console.log(response);
					if(response){
						this.rapidCountryOption.yAxis.data = response.data[0].type;
						this.rapidCountryOption.series[0].data = response.data[0].data[0];
						rapidCountryChart.setOption(this.rapidCountryOption);
					}
				})
			},
			getRapidPersonalData(){
				let rapidPersonalUrl = getInterface.getRapidPersonalUrl + '/' + this.picked;
				let rapidPersonalChart = echarts.init(this.$refs.rapidPersonalChart);
				this.$http.get(rapidPersonalUrl,{emulateJSON:true})
				.then((response) => {
					// console.log(response);
					if(response){
						let dataLen = response.data[0].data[0].length;
						this.rapidPersonalOption.xAxis.data[dataLen-1] = response.data[0].type[0];
						this.rapidPersonalOption.series.data = response.data[0].data[0];
						rapidPersonalChart.setOption(this.rapidPersonalOption);
					}
				})
			},
			getselectData(){
				this.getYearData();
				this.getEarnsData();
				this.getDeductChartByPersonalData();
				this.getOverTimeCountryData();
				this.getOverTimePersonalData();
			},
			starTip(){
				this.isShowStarTip = true;
				let vue = this;
				setTimeout(function(){
					vue.isShowStarTip = false;
				},5000);
			},
			statusTip(){
				this.isShowStatusTip = true;
				let vue = this;
				setTimeout(function(){
					vue.isShowStatusTip = false;
				},5000)
			},
			getpayListData(score,title){
				this.payList=[];
				let deductDetailByPersonalUrl = getInterface.getDeductDetailByPersonalUrl;
				let params = {
					'empNo':this.picked,
					'score':score
				}
				this.$http.post(deductDetailByPersonalUrl,params,{emulateJSON:true})
				.then((response)=>{
					console.log(response);
					this.payList = response.data;
					this.payType = title;
				})
			},
			getDetailShow(list){
				this.showInfoCon = list.content;
				this.isShowPop = true;
			},
			hideShow(){
				this.isShowPop = false;
			},
			getEarnListData(score,earnType){
				this.earnList=[];
				let BonusDetailByPersonalUrl = getInterface.getBonusDetailByPersonalUrl;
				let params = {
					'empNo':this.picked,
					// 'empNo':'zhanry',
					'score':score
				}
				this.$http.post(BonusDetailByPersonalUrl,params,{emulateJSON:true})
				.then((response)=>{
					// console.log(response);
					this.earnList = response.data;
					this.earnType = earnType;
				})
			}
		}
	}
</script>
